<script setup>
const activeName = inject('activeName');
const isExpand = ref(false);
const detailActiveName = ref('problem');
const problemObj = ref({
  a: '2023',
  b: 'A类型',
  c: '是',
  d: 'B1分类',
  e: 'B1-分类',
  f: 'A省公司/B2部门22222222222222222222222',
  g: 'A省公司/B2部门',
  h: 'A省公司/B2部门',
  i: '2023/01/01—2023/12/31',
  j: '张嘉乐',
  k: '1,000,000',
  l: '1,000,000',
  m: '365',
});
const problemList = ref([
  {
    before: '年度',
    prop: 'a',
  },
  {
    before: '计划需求分类',
    prop: 'b',
  },
  {
    before: '是否国家重点项目',
    prop: 'c',
  },
  {
    before: '项目一级分类',
    prop: 'd',
  },
  {
    before: '项目二级分类',
    prop: 'e',
  },
  {
    before: '组织单位',
    prop: 'f',
  },
  {
    before: '实施单位',
    prop: 'g',
  },
  {
    before: '被审计单位',
    prop: 'h',
  },
  {
    before: '实施时间',
    prop: 'i',
  },
  {
    before: '项目负责人',
    prop: 'j',
  },
  {
    before: '项目批复概算（万元）',
    prop: 'k',
  },
  {
    before: '项目预算（元）',
    prop: 'l',
  },
  {
    before: '所需工日（天）',
    prop: 'm',
  },
]);
const activities = [
  {
    person: '张嘉乐',
    timestamp: '2023/01/01  12:00',
    opinion: '同意',
    type: 'primary',
    size: 'large',
    hollow: true,
  },
  {
    person: '张嘉乐',
    timestamp: '2023/01/01  12:00',
    opinion: '同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意',
    size: 'large',
  },
];


const expandLabel = computed(() => (isExpand.value ? '点击收起' : '点击展开'));
const cardExpandBorder = computed(() => (isExpand.value ? 'expand-card-wrapper-border' : 'solid-1'));
const detailExpandBorder = computed(() => 'expand-detail-border');

const handleExpand = () => {
  isExpand.value = !isExpand.value;
  detailActiveName.value = 'problem';
};
const handleClick = (tab) => {
  detailActiveName.value = tab.paneName;
};
</script>

<template>
  <div class="item-container-card">
    <div class="card-wrapper" :class="cardExpandBorder">
      <div class="card-content">
        <picture>
          <source srcset="@/assets/images/work/item-icon.webp" type="image/webp">
          <source srcset="@/assets/images/work/item-icon.png" type="image/png">
          <img src="@/assets/images/work/item-icon.png" class="item-icon">
        </picture>
        <div class="main-wrapper">
          <div class="item-head">
            <div class="item-head__title" title="甘肃省xxx设计项目A">甘肃省xxx设计项目A</div>
            <div class="item-head__circle">执行周期：2023/01/01—2023/04/01</div>
          </div>
          <div class="item-content">
            <div class="item-content__audited-department" title="A省公司/A1部门">被审计单位：A省公司/A1部门</div>
            <div class="item-content__pipe"></div>
            <div class="item-content__do-department" title="A省公司/B2部门333333333">实施审计单位：A省公司/B2部门333333333</div>
            <div class="item-content__pipe"></div>
            <div class="item-content__principal" title="张嘉乐">项目负责人：张嘉乐</div>
          </div>
        </div>
      </div>
      <div class="approval__tag" v-if="activeName === 'done'">
        <picture>
          <source srcset="@/assets/images/work/agree.webp" type="image/webp">
          <source srcset="@/assets/images/work/agree.png" type="image/png">
          <img src="@/assets/images/work/agree.png" class="approval__tag--img">
        </picture>
        <picture>
          <source srcset="@/assets/images/work/disagree.webp" type="image/webp">
          <source srcset="@/assets/images/work/disagree.png" type="image/png">
          <img src="@/assets/images/work/disagree.png" class="approval__tag--img">
        </picture>
      </div>
      <div class="expand__btn">
        <el-button type="primary" @click="handleExpand">{{ expandLabel }}</el-button>
      </div>
    </div>
    <div v-if="isExpand" class="card-detail" :class="detailExpandBorder">
      <el-tabs class="tabs" v-model="detailActiveName" @tab-click="handleClick">
        <el-tab-pane label="整改问题" name="problem">
          <div class="problem-grid">
            <template v-for="problem in problemList" :key="problem.prop">
              <div class="grid-wrapper">
                <iconify-icon
                  class="title__icon"
                  icon="mdi:format-list-checks"
                  :width="14"
                  :height="14"
                  />
                  <p class="title__label" :title="problemObj[problem.prop]">
                    {{ problem.before }}：{{ problemObj[problem.prop] }}
                  </p>
              </div>
            </template>
          </div>
        </el-tab-pane>
        <el-tab-pane label="审计成果" name="achieve">
          <div class="achieve__timeline">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :size="activity.size"
                :hollow="activity.hollow"
              >
                <div class="timeline__person">申请人：{{ activity.person }}</div>
                <div class="timeline__time">审批时间：{{ activity.timestamp }}</div>
                <div class="timeline__opinion">审批意见：</div>
                <div class="timeline__opinion-content">{{ activity.opinion }}</div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/style/common.scss';

$border-color: #D9DCE4;

@mixin border-properties($directions...) {
  @each $direction in $directions {
    border-#{$direction}: 1px solid $border-color;
  }
}

.expand-card-wrapper-border {
  @include border-properties(top, right, left);
}

.expand-detail-border {
  @include border-properties(right, bottom, left);
}
.solid-1 {
  border: 1px solid #D9DCE4;
}

.item-container-card {
  .card-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 78px;
    background: #F6F8FA;
    border-radius: 2px;

    .card-content {
      display: flex;


      .item-icon {
        width: 36px;
        height: 36px;
        object-fit: cover;
        margin-left: 15px;
      }

      .main-wrapper {
        margin-left: 16px;

        .item-head {
          display: flex;
          height: 16px;
          line-height: 16px;

          .item-head__title {
            @include ellipsis();
            max-width: 500px;
            font-size: 16px;
            font-weight: 400;
            color: #25292C;
          }

          .item-head__circle {
            font-size: 12px;
            font-weight: 400;
            color: #989DA3;
            margin-left: 28px;
          }
        }

        .item-content {
          display: flex;
          align-items: center;
          height: 13px;
          line-height: 13px;
          font-size: 12px;
          font-weight: 400;
          color: #50565D;
          margin-top: 10px;
          gap: 10px;

          .item-content__pipe {
            width: 1px;
            height: 8px;
            background: #50565D;
          }

          .item-content__audited-department {
            @include ellipsis();
            width: 158px;
          }

          .item-content__do-department {
            @include ellipsis();
            width: 170px;
          }
        }
      }
    }

    .approval__tag {
      .approval__tag--img {
        width: 48px;
        height: 48px;
        object-fit: cover;
      }
    }

    .expand__btn {
      margin-right: 24px;
      .el-button {
        width: 72px;
        height: 28px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 400;
      }
    }
  }

  .card-detail {
    border-radius: 2px;

    .tabs {
      .problem-grid {
        display: grid;
        padding: 0 10px;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        .grid-wrapper {
          display: flex;

          .title__label {
            @include ellipsis();
            max-width: 387px;
            margin-left: 8px;
            height: 14px;
            font-size: 14px;
            font-weight: 400;
            color: #50565D;
            line-height: 14px;
          }
        }
      }

      .achieve__timeline {
        padding: 24px;

        .timeline__person {
          height: 14px;
          font-size: 14px;
          font-weight: 500;
          color: #25292C;
          line-height: 14px;
        }

        .timeline__time {
          height: 13px;
          font-size: 12px;
          font-weight: 400;
          color: #989DA3;
          line-height: 12px;
          margin-top: 11px;
        }

        .timeline__opinion {
          height: 14px;
          font-size: 14px;
          font-weight: 400;
          color: #50565D;
          line-height: 14px;
          margin-top: 11px;
        }

        .timeline__opinion-content {
          width: 1180px;
          background: #F6F8FA;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: #50565D;
          line-height: 15px;
          padding: 18px 12px;
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
